<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <h2 align="center">{{info}}</h2>
        <div>
        <el-button type="danger" icon="el-icon-delete" @click="handleBatchDelete">批量删除</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="openDlg" >添加图书 </el-button>
    </div>
        <el-table
        :data="books"
        border
        style="width: 100%"
        ref="myTable"
        @selection-change="handleSelectionChange">

        <el-table-column 
        type="selection"
        align="center"
        width="50">
</el-table-column>
        

    <el-table-column
        prop="f_id"
        label="书号"
        width="150">
   </el-table-column>

    <el-table-column
        prop="f_title"
        label="书名"
        width="150"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_author"
        label="作者"
        
        align="center">
    </el-table-column>

    <el-table-column
        prop="f_image"
        label="图片"
        width="180"
        v-if="colVisible"
        
        align="center">
        <!-- 然后 在el-table 里嵌套其他标签 一般来说 都是用插槽 也就是 template
        
            然后 因为el-table相当于 v-for books数组 所以 每个 el-table-column 能够获取到对应的那一个数据 

            但是 插槽打乱了 这个序列（相当于吧 ） 所以 需要在插槽加一个参数  slot-scope 值呢就是 scope 加上 scope.row 就是获取这行表格的这个插槽对应的数据

            差不读这样

            嗯..

        -->

        <!-- <template>
            <img :src="path + books.f_image" alt="" style="width: 150px; height: 150px">
        </template> -->
        <!-- <img :src="path + books.f_image" alt="" style="width: 150px; height: 150px"> -->
        <template slot-scope="scope">
            
            <img :src='path + scope.row.f_image' alt="" style="width: 150px; height: 150px">
        </template>
        </el-table-column>
       
    <el-table-column
        prop="f_type"
        label="类型"
        width="120"
        align="center">
    </el-table-column>
    <el-table-column
        prop="f_price"
        label="价格"
        width="120"
        :formatter="moneyFormat"
        align="center">
        </el-table-column>


        <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">

                <el-button
                size="mini"
                type="success"
                icon="el-icon-edit"
                @click="openDlg2(scope.$index,scope.row)">编辑</el-button>

                <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index,scope.row)">删除</el-button>
            </template>
        </el-table-column>
  </el-table>

  <div><el-tag type="success">总价格：￥{{totalPrice}}</el-tag></div>

            <!-- 添加 -->
          <div><el-dialog
            title="添加"
            :visible.sync="dlgVisible"
            width="50%"
            >
        
            <el-form ref="book" :model="book" label-width="80px">
                <el-form-item label="书名">
                    <el-input v-model="book.f_title"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="book.f_author"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="book.f_price"></el-input>
                </el-form-item>
                
                <el-form-item label="类型">
                   
                        <el-select v-model="book.f_type" placeholder="请选择图书类型">
                          <el-option label="小说" value="小说"></el-option>
                          <el-option label="教材" value="教材"></el-option>
                          <el-option label="散文" value="散文"></el-option>
                          <el-option label="诗歌" value="诗歌"></el-option>
                        </el-select>
                      
                   </el-form-item>

                <el-form-item label="封面">
                    <input type="file"  @change="onChange">
                    <p></p>
                    <img :src="filePath" alt="" style="width: 150px; height: 150px">
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onAdd">添加</el-button>
                <el-button>取消</el-button>
            </el-form-item>
           </el-form>
           </el-dialog>
        </div> 
        
         <!-- 编辑 -->
         <div><el-dialog
            title="编辑"
            :visible.sync="dlgVisible2"
            width="50%"
            >
        
            <el-form ref="book2" :model="book2" label-width="80px">
                <el-form-item label="书名">
                    <el-input v-model="book2.f_title"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input v-model="book2.f_author"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="book2.f_price"></el-input>
                </el-form-item>
                
                <el-form-item label="类型">
                    <template>
                        <el-select v-model="book2.f_type" placeholder="请选择图书类型">
                          <el-option label="小说" value="小说"></el-option>
                          <el-option label="教材" value="教材"></el-option>
                          <el-option label="散文" value="散文"></el-option>
                          <el-option label="诗歌" value="诗歌"></el-option>
                        </el-select>
                      </template>
                   </el-form-item>

                <el-form-item label="封面">
                    <input type="file"  @change="onChange2">
                    <p></p>
                    <img :src="filePath" alt="" style="width: 150px; height: 150px">
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onUpdate">修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
           </el-form>
           </el-dialog>
        </div> 
        

          
        
    </div>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>

        let vm=new Vue({
            el:'#app',
            data:{
                
                info:'图书信息管理',
                colVisible:true,
                books:[],//数据库的图书
                selectBooks:[],//待删除的图书
                dlgVisible:false,//添加对话框的可见性
                dlgVisible2:false,//编辑对话框的可见性
                path:'http://localhost:44355/content/img/',
                css:'width:100px;height:100px',
                types:['小说','散文','教材','诗歌'],
                img:null,
                filePath:'',
                book:{f_id:0,f_title:'',f_author:'',f_price:0,f_image:''},
                book2:{f_id:0,f_title:'',f_author:'',f_price:0,f_image:''},
                
        
        },
             //计算属性   
        computed:{
                    totalPrice(){
                    let sum=0;
                    this.books.forEach(bk => sum +=bk.f_price)
                    return sum;
                    
                },
            },
            /*方法*/
            methods:{
                bindTable(){
                let _this = this//保存对vue对象的实例引用
                //发出ajax请求，获取服务器中图书表的记录
                axios.get('http://localhost:44355/Book/Index')
                .then(function(rs){
                    console.log(rs)

                    // console.log('111')
                    _this.books=rs.data
                })
            },

                 //货币格式化
                moneyFormat(row,column,cellValue,index){
                return '￥'+cellValue
            },
                //当选择发生变化时
                handleSelectionChange(val){
                    this.selectBooks=val
                },
                    

                //上传图片到Server（1）
                onChange(e){
                    this.img=e.target.files[0]
                    let _this=this

                let formData =new FormData()
                //fromData与MVC中Book控制器 public JsonResult upload(HttpPostedFileBase image )的image 参数匹配
                formData.append('image',this.img)
                 //图片预览
                 _this.filePath= window.URL.createObjectURL(this.img);

                axios.post('http://localhost:44355/Book/upload',formData)
                .then(function (rs)
                {
                    _this.book.f_image=rs.data.image //将保存到服务器中的新文件名返回到
                    console.log("上传图片ok:"+_this.book.f_image);
                })
                },

                //上传图片到Server（2）
                onChange2(e){
                    this.img=e.target.files[0]
                    let _this=this

                let formData =new FormData()
                //fromData与MVC中Book控制器 public JsonResult upload(HttpPostedFileBase image )的image 参数匹配
                formData.append('image',this.img)
                 //图片预览
                 _this.filePath= window.URL.createObjectURL(this.img);

                axios.post('http://localhost:44355/Book/upload',formData)
                .then(function (rs)
                {
                    _this.book2.f_image=rs.data.image //将保存到服务器中的新文件名返回到
                    console.log("上传图片ok:"+_this.book2.f_image);
                })
                },

                //添加图书到DB
                 onAdd(){
                    let _this=this
                    axios.post('http://localhost:44355/Book/add',_this.book)
                    .then(function(rs){
                       _this.book.f_id=0
                       _this.book.f_title=''
                       _this.book.f_author=''
                       _this.book.f_price=0
                       _this.book.f_type=''
                       _this.book.f_image=''

                        //关闭对话框
                        _this.dlgVisible  =false
                        _this.bindTable() //刷新图书列表
                    })
                 },


                 //打开编辑对话框
        openDlg2(i,row){
            this.dlgVisible2 = true
            this.book2.f_id=row.f_id
            this.book2.f_title= row.f_title
            this.book2.f_author= row.f_author
            this.book2.f_price= row.f_price
            this.book2.f_type= row.f_type
            this.book2.f_image= row.f_image
         //预览图片
         this.filePath= this.path+row.f_image
         
         console.log('编辑book2.f_image:'+this.book2.f_image);
        },

        
                
                
                 //修改图书
                 onUpdate(){
                    let _this=this
                    
                    axios.post('http://localhost:44355/Book/update',_this.book2)
                    .then(function (rs){
                       console.log(rs.data);

                       _this.book2.f_id=0
                       _this.book.f_title=''
                       _this.book2.f_author=''
                       _this.book2.f_price=0
                       _this.book2.f_type=''
                       _this.book2f_image=''

                        //关闭对话框
                        _this.dlgVisible2  =false
                        _this.bindTable() //刷新图书列表 
                    })
                 },

                 //删除图书
                 handleDelete(index,row){
                this.$confirm('此操作将永久删除该文件，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() =>{
                    //删除
                    let _this=this//保存对Vue实例的引用
                    //发出ajax请求，获取服务器中图书表的记录
                    axios.get('http://localhost:44355/Book/delete/' + row.f_id)
                    .then(function (rs){
                        //刷新表格，显示最新的数据
                        axios.get('http://localhost:44355/Book/Index')
                        .then(function(rs){
                            _this.books=rs.data//将获取图书保存到数组
                        })
                    })

                 
                    this.$message({
                        type:'success',
                        message:'删除成功！'
                    });
                }) .catch(()=>{
                    this.$message({type:'info',message:'已取消删除'});
                });
            },

            //批量删除
            //批量删除
            handleBatchDelete(){
                this.$confirm('此操作将永久删除该文件，是否继续？','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() =>{
                    //ajax删除
                    let _this=this
                    let ids=''
                    _this.selectBooks.forEach(bk=>{
                        ids +=bk.f_id+','
                    })
                    //割尾巴
                    ids = ids.substring(0,ids.length-1)
                    axios.get('http://localhost:44355/Book/batchDelete/' +ids)
                    .then(function(rs){
                        //发出ajax请求，获取服务器中的图书表的记录
                        axios.get('http://localhost:44355/Book/Index')
                        .then(function(rs){
                            _this.books=rs.data//将获取的图书保存到数组
                        })
                        console.log(rs.data)
                    })
                    this.$message({
                        type:'success',
                        message:'删除成功'
                    });

            }) .catch(()=>{
                this.$message({
                    type:'info',
                    message:'已取消删除'
                });
            });
        },
        //打开添加对话框
        openDlg(){
            this.path=''
            this.dlgVisible = true;
        },

        handleClose(done) {                  
                  this.$confirm('确认关闭？')
                    .then(_ => {
                      done();
                    })
                    .catch(_ => {});
                },
 },
            
 //生命周期：类似webfrom 的 xx_load()
        created(){
            this.bindTable()
        },
        })
    </script>
    
</body>
</html>